<script setup lang="ts">
import { useUserStore } from '@/store'
import { getReportDataListApi } from '@/service/global'

const userInfoRef = useUserStore()
const reportsDataList = ref([
  [
    { key: '借阅数量', value: '-' },
    { key: '逾期数量', value: '-' },
    { key: '借入总数', value: '-' },
  ],
  [
    { key: '借阅数量', value: '-' },
    { key: '逾期数量', value: '-' },
    { key: '借出总数', value: '-' },
  ],
])

onMounted(async () => {
  // await resetData()
})

const resetData = async () => {
  const reportsListRes = await getReportDataListApi()
  console.log('reportsListRes', reportsListRes)
  reportsDataList.value = reportsListRes.data
}

defineExpose({
  resetData,
})
</script>

<template>
  <view class="outContain">
    <uni-collapse accordion>
      <uni-collapse-item title="借阅统计" :open="false">
        <view class="contain">
          <view
            class="contain-content"
            v-for="(reportsData, index) in reportsDataList"
            :key="index"
          >
            <image
              class="contain-content-icon"
              src="@/static/home/reports.png"
              mode="scaleToFill"
            />
            <text class="contain-content-title">{{ index == 0 ? '借入统计' : '借出统计' }}</text>
            <view class="group-content">
              <view class="group-content-view" v-for="(item, index) in reportsData" :key="index">
                <view class="group-content-view-item">
                  <text class="group-content-view-item-title">{{ item.key }}</text>
                  <text class="group-content-view-item-content">{{ item.value }}</text>
                </view>
                <view class="separator"></view>
              </view>
            </view>
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<style lang="scss">
.outContain {
  margin: 25rpx 25rpx;
  border-radius: 30rpx;
}

.contain {
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 30rpx;

  .contain-content {
    width: 50%;

    .contain-content-icon {
      display: inline-block;
      width: 50rpx;
      height: 50rpx;
      margin-right: 10rpx;
    }
    // .contain-content-title {
    // }
  }

  .group-content {
    padding: 20rpx 20rpx;
    font-size: 30rpx;
    text-align: center;

    .group-content-view {
      display: flex;
      flex-direction: column;
      width: 90%;
      border-bottom-right-radius: 10rpx;
      border-bottom-left-radius: 10rpx;
      .group-content-view-item {
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        text-align: left;
        .group-content-view-item-title {
          width: 30%;
          margin-right: 30rpx;
        }
        .group-content-view-item-content {
          width: 70%;
          padding-left: 20rpx;
        }
      }
    }

    .separator {
      width: 100%;
      height: 1rpx;
      margin: 10rpx 0rpx;
      background-color: $main-color;
      opacity: 0.5;
    }
  }
}
</style>
